<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
    <style>
        div{
            border: 1px solid gray;
            margin-top: 2px;
            width: 200px;
            text-align: center;
        }
    </style>
    <script src="../jQuery/jquery-1.12.4.min%20(2).js"></script>
    <script>
        jQuery(function($) {
            $('#btnId').click(function () {
                $('#aa').css({backgroundColor: "#ff0011" })
                }
            );
            $('#btnE').click(function () {
                    $('div').css({backgroundColor: "#ff0011" })
                }
            )
        });
    </script>
</head>
<body>
<fieldset>
    <legend>选择器</legend>
    <p>在jQuery中，有许多的选择器，用来抓取页面元素，下面解释一下部分的选择器的使用</p>
    <hr style="border: 1px dashed gray;" id="_id"/>
    <span class="redb">#id</span>　<span class="f-w">通过id抓取元素</span>
    <p class="f-w">说明：</p>
    <pre>
        html代码：
        &lt;div id="aa"&gt;div1&lt;/div&gt;
        &lt;div id="bb"&gt;div2&lt;/div&gt;</pre>

    <span>　　 使用 <span class="red">#id</span> 抓取上面代码中 有命名为 <span class="z">aa</span> 的元素</span><br/><br/>
        <span>　　 jQuery代码：</span><br/>
        <span class="red">　　 $("#aa");</span><br/>
     <pre>
         <span>运行结果：</span>
         &lt;div <span class="z">id="aa"</span>&gt;id="aa"&lt;/div&gt;
     </pre>
    <p class="f-w">示例：</p>
    <div id="aa">div1</div>
    <div id="bb">div2</div>
    <p class="f-w">运行效果：</p>
    <button id="btnId">运行</button>　　<span class="g">(通过id抓取div1 给它加上了一个背景色)</span>
    <p class="f-w">代码示例：</p>
    <pre>
        html代码：
        &lt;div id="aa"&gt;div1&lt;/div&gt;
        &lt;div id="bb"&gt;div2&lt;/div&gt;

        jQ代码：
        jQuery(function($) {
            $('#btnId').click(function () {
            <span class="red">$('#aa')</span>.css({backgroundColor: "#ff0011" })
                }
            )
        });
    </pre>


    <hr style="border: 1px dashed gray;" id="e"/>
    <span class="redb" >element</span>　<span class="f-w">通过标签抓取元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;div&gt;div1&lt;/div&gt;
        &lt;div&gt;div2&lt;/div&gt;
        &lt;span&gt;span&lt;/span&gt;</pre>

    <span>　　 使用 <span class="red">element</span> 抓取上面代码中 <span class="z">div</span> 标签的元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("div");</span><br/>
    <pre>
         <span>运行结果：</span>
         &lt;<span class="z">div</span>&gt;div1&lt;<span class="z">/div</span>&gt;
         &lt;<span class="z">div</span>&gt;div2&lt;<span class="z">/div</span>&gt;
     </pre>
    <p class="f-w">示例：</p>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <span>我是span</span>
    <p class="f-w">运行效果：</p>
    <button id="btnE">运行</button>　　<span class="g">(通过id抓取div1 给它加上了一个背景色)</span>
    <p class="f-w">代码示例：</p>

    <hr style="border: 1px dashed gray;" id="class"/>
    <span class="redb" >.class</span>　<span class="f-w">通过class命名抓取元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;div class="notMe"&gt;class="notMe"&lt;/div&gt;
        &lt;div class="myclass"&gt;class="myclass"&lt;/div&gt;
        &lt;span class="myclass"&gt;class="myclass"&lt;/span&gt;</pre>

    <span>　　 使用 <span class="red">.class</span> 抓取上面代码中有 <span class="z">class</span> 命名的元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $(".myclass");</span><br/>
    <pre>
         <span>运行结果：</span>
         &lt;div <span class="z">class="myclass"</span>&gt;class="myclass"&lt;/div&gt;
         &lt;span <span class="z">class="myclass"</span>&gt;class="myclass"&lt;/span&gt;</pre>

    <hr style="border: 1px dashed gray;" id="parent"/>
    <span class="redb">parent > child</span>　<span class="f-w">抓取一个父级标签下的某个子级标签</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
          &lt;form&gt;
             &lt;label&gt;Name:&lt;/label&gt;
             &lt;input name="name"/&gt;
             &lt;fieldset&gt;
                 &lt;label&gt;Newsletter:&lt;/label&gt;
                 &lt;input name="newsletter"/&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
          &lt;input name="none"/&gt;</pre>

    <span>　　 使用 <span class="red">parent > child</span> 抓取上面代码中 <span class="z">form</span> 标签的子级 <span class="z">input</span> 标签元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("form > input");</span><br/>
    <pre>
         <span>运行结果：</span>
          &lt;<span class="z">input</span> name="name"/&gt;</pre>

    <hr style="border: 1px dashed gray;" id="even"/>
    <span class="redb">:even</span>　<span class="f-w">匹配所有索引值为偶数的元素，从 0 开始计数</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;table&gt;
             &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;</pre>

    <span>　　 使用 <span class="red">:even</span> 抓取上面代码中索引值为 <span class="z">偶数</span> 的元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("tr:even")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        <span class="z">在上面的表格代码中 这两行的占位符是 0 和 2  都是偶数</span></pre>

    <hr style="border: 1px dashed gray;" id="odd"/>
    <span class="redb">:odd</span>　<span class="f-w">匹配所有索引值为奇数的元素，从 0 开始计数</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;table&gt;
             &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;</pre>

    <span>　　 使用 <span class="red">:odd</span> 抓取上面代码中索引值为 <span class="z">奇数</span> 的元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("tr:odd")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
        <span class="z">在上面的表格代码中 这一行的占位符是 1 为奇数</span></pre>

    <hr style="border: 1px dashed gray;" id="first"/>
    <span class="redb">:first</span>　<span class="f-w">匹配第一个元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;ul&gt;
            &lt;li&gt;list item 1&lt;/li&gt;
            &lt;li&gt;list item 2&lt;/li&gt;
            &lt;li&gt;list item 3&lt;/li&gt;
            &lt;li&gt;list item 4&lt;/li&gt;
            &lt;li&gt;list item 5&lt;/li&gt;
        &lt;/ul&gt;</pre>

    <span>　　 使用 <span class="red">:first</span> 匹配上面代码中的 <span class="z">第一个</span> 元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("li:first")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;li&gt;list item 1&lt;/li&gt;
        <span class="z">在上面代码的li中 这条li代码在第一位</span></pre>

    <hr style="border: 1px dashed gray;" id="last"/>
    <span class="redb">:last</span>　<span class="f-w">匹配最后一个元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;ul&gt;
            &lt;li&gt;list item 1&lt;/li&gt;
            &lt;li&gt;list item 2&lt;/li&gt;
            &lt;li&gt;list item 3&lt;/li&gt;
            &lt;li&gt;list item 4&lt;/li&gt;
            &lt;li&gt;list item 5&lt;/li&gt;
        &lt;/ul&gt;</pre>

    <span>　　 使用 <span class="red">:last</span> 匹配上面代码中的 <span class="z">最后</span> 一个元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("li:last")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;li&gt;list item 5&lt;/li&gt;
        <span class="z">在上面代码的li中 这条li代码在最后一个</span></pre>

    <hr style="border: 1px dashed gray;" id="eq"/>
    <span class="redb">:eq</span>　<span class="f-w">给一个值匹配元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;table&gt;
             &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;</pre>

    <span>　　 要求查找第二行：</span>
    <span>　　 那么给 <span class="red">:eq</span> 一个值 <span class="z">1</span> ,从0开始计算</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("tr:eq(1)")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
        <span class="z">这条代码在第二行，占位符为1</span></pre>

    <hr style="border: 1px dashed gray;" id="gt"/>
    <span class="redb">:gt</span>　<span class="f-w">给定一个值，然后匹配比这个值大的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;table&gt;
             &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;</pre>

    <span>　　 给 <span class="red">:gt</span>  <span class="z">一个值</span> ,匹配比这个值大的元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("tr:gt(0)")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        <span class="z">这两条代码的占位符都比gt的值大</span></pre>

    <hr style="border: 1px dashed gray;" id="lt"/>
    <span class="redb">:lt</span>　<span class="f-w">给定一个值，然后匹配比这个值小的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;table&gt;
             &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;</pre>

    <span>　　 给 <span class="red">:lt</span>  <span class="z">一个值</span> ,匹配比这个值小的元素</span><br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("tr:lt(2)")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;tr&gt;&lt;td&gt;Header 1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;/tr&gt;
        <span class="z">这两条代码的占位符都比lt的值小</span></pre>

    <hr style="border: 1px dashed gray;" id="attr"/>
    <span class="redb">[attribute]</span>　<span class="f-w">匹配包含给定属性的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;div&gt;
            &lt;p&gt;Hello!&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="test2"&gt;&lt;/div&gt;</pre>

    <span>　　 使用 <span class="red">[attribute]</span> （attribute属性名） <span class="z">查找所有含有 id 属性的 div 元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("div[id]")</span><br/>

    <pre>
         <span>运行结果：</span>
          &lt;div id="test2"&gt;&lt;/div&gt;
        <span class="z">这条代码是含有id属性的div元素</span></pre>

    <hr style="border: 1px dashed gray;" id="attr_v1"/>
    <span class="redb">[attribute=value]</span>　<span class="f-w">匹配给定的属性是某个特定值的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;input type="checkbox" name="newsletter" value="Hot Fuzz" /&gt;
        &lt;input type="checkbox" name="newsletter" value="Cold Fusion" /&gt;
        &lt;input type="checkbox" name="accept" value="Evil Plans" /&gt;</pre>

    <span>　　 使用 <span class="red">[attribute=value]</span> （attribute为属性名,value为属性值） <span class="z">查找所有 name 属性是 newsletter 的 input 元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input[name='newsletter']").attr("checked", true);</span><br/>

    <pre>
         <span>运行结果：</span>
           &lt;input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true"/&gt;
           &lt;input type="checkbox" name="newsletter" value="Cold Fusion" checked="true"/&gt;
          <span class="z">这两条代码是name 属性是 newsletter 的 input 元素</span></pre>

    <hr style="border: 1px dashed gray;" id="attr_v2"/>
    <span class="redb">[attribute!=value]</span>　<span class="f-w">匹配所有不含有指定的属性，或者属性不等于特定值的元素。</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
        &lt;input type="checkbox" name="newsletter" value="Hot Fuzz" /&gt;
        &lt;input type="checkbox" name="newsletter" value="Cold Fusion" /&gt;
        &lt;input type="checkbox" name="accept" value="Evil Plans" /&gt;</pre>

    <span>　　 使用 <span class="red">[attribute!=value]</span> （attribute为属性名,value为属性值） <span class="z">查找所有 name 属性不是 newsletter 的 input 元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input[name!='newsletter']").attr("checked", true);</span><br/>

    <pre>
         <span>运行结果：</span>
           &lt;input type="checkbox" name="accept" value="Evil Plans" checked="true"/&gt;
          <span class="z">这条代码是name 属性不是 newsletter 的 input 元素</span></pre>

    <hr style="border: 1px dashed gray;" id="attr_v3"/>
    <span class="redb">[attribute^=value]</span>　<span class="f-w">匹配给定的属性是以某些值开始的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
            &lt;input name="newsletter" /&gt;
            &lt;input name="milkman" /&gt;
            &lt;input name="newsboy" /&gt;</pre>

    <span>　　 使用 <span class="red">[attribute^=value]</span> （attribute为属性名,value为属性值） <span class="z">查找所有 name 以 'news' 开始的 input 元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input[name^='news']")</span><br/>

    <pre>
         <span>运行结果：</span>
           &lt;input name="newsletter" /&gt;
           &lt;input name="newsboy" /&gt;
          <span class="z">这两条代码是 name 以 'news' 开始的 input 元素</span></pre>

    <hr style="border: 1px dashed gray;" id="attr_v4"/>
    <span class="redb">[attribute$=value]</span>　<span class="f-w">匹配给定的属性是以某些值结尾的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
            &lt;input name="newsletter" /&gt;
            &lt;input name="milkman" /&gt;
            &lt;input name="jobletter" /&gt;</pre>

    <span>　　 使用 <span class="red">[attribute$=value]</span> （attribute为属性名,value为属性值） <span class="z">查找所有 name 以 'letter' 结尾的 input 元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input[name$='letter']")</span><br/>

    <pre>
         <span>运行结果：</span>
           &lt;input name="newsletter" /&gt;
           &lt;input name="jobletter" /&gt;
          <span class="z">这两条代码是 name 以 'letter' 结尾的 input 元素</span></pre>

    <hr style="border: 1px dashed gray;" id="attr_v5"/>
    <span class="redb">[attribute*=value]</span>　<span class="f-w">匹配给定的属性是以包含某些值的元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
            &lt;input name="man-news" /&gt;
            &lt;input name="milkman" /&gt;
            &lt;input name="letterman2" /&gt;
            &lt;input name="newmilk" /&gt;</pre>

    <span>　　 使用 <span class="red">[attribute*=value]</span> （attribute为属性名,value为属性值） <span class="z">查找所有 name 包含 'man' 的 input 元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input[name*='man']")</span><br/>

    <pre>
         <span>运行结果：</span>
           &lt;input name="man-news" /&gt;
           &lt;input name="milkman" /&gt;
           &lt;input name="letterman2" /&gt;
          <span class="z">以上代码是 name 包含 'man' 的 input 元素</span></pre>

    <hr style="border: 1px dashed gray;" id="text"/>
    <span class="redb">:text</span>　<span class="f-w">匹配所有的单行文本框</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
           &lt;form&gt;
              &lt;input type="text" /&gt;
              &lt;input type="checkbox" /&gt;
              &lt;input type="radio" /&gt;
              &lt;input type="image" /&gt;
              &lt;input type="file" /&gt;
              &lt;input type="submit" /&gt;
              &lt;input type="reset" /&gt;
              &lt;input type="password" /&gt;
              &lt;input type="button" /&gt;
              &lt;select&gt;&lt;option/&gt;&lt;/select&gt;
              &lt;textarea&gt;&lt;/textarea&gt;
              &lt;button&gt;&lt;/button&gt;
           &lt;/form&gt;</pre>

    <span>　　 使用 <span class="red">:text</span>  <span class="z">查找所有文本框</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $(":text")</span><br/>

    <pre>
         <span>运行结果：</span>
        &lt;input type="<span class="z">text</span>" /&gt;</pre>

    <hr style="border: 1px dashed gray;" id="radio"/>
    <span class="redb">:radio</span>　<span class="f-w">匹配所有单选按钮</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
           &lt;form&gt;
              &lt;input type="text" /&gt;
              &lt;input type="checkbox" /&gt;
              &lt;input type="radio" /&gt;
              &lt;input type="image" /&gt;
              &lt;input type="file" /&gt;
              &lt;input type="submit" /&gt;
              &lt;input type="reset" /&gt;
              &lt;input type="password" /&gt;
              &lt;input type="button" /&gt;
              &lt;select&gt;&lt;option/&gt;&lt;/select&gt;
              &lt;textarea&gt;&lt;/textarea&gt;
              &lt;button&gt;&lt;/button&gt;
           &lt;/form&gt;</pre>

    <span>　　 使用 <span class="red">:radio</span>  <span class="z">查找所有单选按钮</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $(":radio")</span><br/>

    <pre>
         <span>运行结果：</span>
        &lt;input type="<span class="z">radio</span>" /&gt;</pre>

    <hr style="border: 1px dashed gray;" id="chebox"/>
    <span class="redb">:checkedbox</span>　<span class="f-w">匹配所有复选框</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
           &lt;form&gt;
              &lt;input type="text" /&gt;
              &lt;input type="checkbox" /&gt;
              &lt;input type="radio" /&gt;
              &lt;input type="image" /&gt;
              &lt;input type="file" /&gt;
              &lt;input type="submit" /&gt;
              &lt;input type="reset" /&gt;
              &lt;input type="password" /&gt;
              &lt;input type="button" /&gt;
              &lt;select&gt;&lt;option/&gt;&lt;/select&gt;
              &lt;textarea&gt;&lt;/textarea&gt;
              &lt;button&gt;&lt;/button&gt;
           &lt;/form&gt;</pre>

    <span>　　 使用 <span class="red">:checkbox</span>  <span class="z">匹配所有复选框</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $(":checkbox")</span><br/>

    <pre>
         <span>运行结果：</span>
        &lt;input type="<span class="z">checkbox</span>" /&gt;</pre>

    <hr style="border: 1px dashed gray;" id="dis"/>
    <span class="redb">:disabled</span>　<span class="f-w">匹配所有不可用元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
         &lt;form&gt;
             &lt;input name="email" disabled="disabled" /&gt;
             &lt;input name="id" /&gt;
         &lt;/form&gt;</pre>

    <span>　　 使用 <span class="red">:disabled</span>  <span class="z">匹配所有不可用元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input:disabled")</span><br/>

    <pre>
         <span>运行结果：</span>
         &lt;input name="email" <span class="z">disabled="disabled"</span> /&gt;</pre>

    <hr style="border: 1px dashed gray;" id="che"/>
    <span class="redb">:checked</span>　<span class="f-w">匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
         &lt;form&gt;
             &lt;input type="checkbox" name="newsletter" checked="checked" value="Daily" /&gt;
             &lt;input type="checkbox" name="newsletter" value="Weekly" /&gt;
             &lt;input type="checkbox" name="newsletter" checked="checked" value="Monthly" /&gt;

         &lt;/form&gt;</pre>

    <span>　　 使用 <span class="red">:checked</span>  <span class="z">查找所有选中的复选框元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("input:checked")</span><br/>

    <pre>
         <span>运行结果：</span>
         &lt;input type="checkbox" name="newsletter" <span class="z">checked="checked" </span>value="Daily" /&gt;
         &lt;input type="checkbox" name="newsletter" <span class="z">checked="checked" </span>value="Monthly" /&gt;</pre>

    <hr style="border: 1px dashed gray;" id="sele"/>
    <span class="redb">:selected</span>　<span class="f-w">匹配所有选中的option元素</span>
    <p class="f-w">示例：</p>
    <pre>
        html代码：
           &lt;select&gt;
              &lt;option value="1"&gt;Flowers&lt;/option&gt;
              &lt;option value="2" selected="selected"&gt;Gardens&lt;/option&gt;
              &lt;option value="3"&gt;Trees&lt;/option&gt;
           &lt;/select&gt;</pre>

    <span>　　 使用 <span class="red">:selected</span>  <span class="z">查找所有选中的选项元素</span></span> <br/><br/>
    <span>　　 jQuery代码：</span><br/>
    <span class="red">　　 $("select option:selected")</span><br/>

    <pre>
         <span>运行结果：</span>
         &lt;option value="2" <span class="z">selected="selected"</span>&gt;Gardens&lt;/option&gt;</pre>
</fieldset>
</body>
</html>